{% extends "common/layout.html" %}
{% block content %}
<audio autoplay="autopaly">
      <source src="{{buildUrl('/static/lover/renxi.mp3')}}" type="audio/mp3" />
    </audio>

    <div class="satic-area">
        <h1 style="text-align:center;top:200px;position: relative">I wish my lover a happy Valentine's Day</h1>

      <div class="box">
<h>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Wife, I love you</h>
        <ul class="minbox">

          <li></li>
          <li></li>
          <li></li>
          <li></li>
          <li></li>
          <li></li>

        </ul>

        <ol class="maxbox">
          <li></li>
          <li></li>
          <li></li>
          <li></li>
          <li></li>
          <li></li>

        </ol>

      </div>
      <div class="dynamic-area1"> </div>
      <div class="dynamic-area2"></div>

    </div>

{% endblock %}

{% block js%}
    <script>
      function init() {
        if (
          navigator.userAgent.match(
            /(phone|pod|iPhone|iPod|ios|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i
          )
        ) {
          var box = document.querySelectorAll(".box")[0];
          box.style.marginTop = "65%";
          box.style.marginLeft = "25%";
        }
      }
      $(function () {
        init();
      });
    </script>
{% endblock %}

{% block css %}

<link rel="stylesheet" type="text/css" href="{{buildStaticUrl('/lover/css/normalize.css')}}" />
<link rel="stylesheet" type="text/css" href="{{buildStaticUrl('/lover/css/demo.css')}}" />
<link rel="stylesheet" href="{{buildStaticUrl('/lover/css/style.css')}}" />
<link rel="stylesheet" href="{{buildStaticUrl('/lover/css/style1.css')}}" />
    <style>
      html,
      body {
        width: 100%;
        height: 100%;
        margin: 0;
        padding: 0;
        overflow: hidden;
      }
      .container {
        width: 100%;
        height: 100%;
        margin: 0;
        padding: 0;
      }
    </style>
{% endblock %}